import CEcharts from '@/components/echarts'
import RollerDigital from '@/components/rollerDigital'
import {CnNormalSpan} from '@/components/text'
import {iconUrl} from '@/libs/baseUrl'
import {CardChild, ScreenCard} from './card'

export const WaterAbnormal = defineComponent({
  setup() {
    const imageDom = new Image()
    imageDom.src = iconUrl('water-drop')
    console.log(imageDom)

    return () => (
      <ScreenCard title='水质异常分析'>
        <div class='w-full h-42 flex items-center'>
          <RollerDigital
            class='w-34 h-40 mr-6 text-center leading-40 text-24'
            style={{backgroundColor: '#fafafa'}}
            endVal={9}
          ></RollerDigital>
          <RollerDigital
            class='w-34 h-40 mr-8  text-center leading-40 text-24'
            style={{backgroundColor: '#fafafa'}}
            endVal={2}
          ></RollerDigital>
          <CnNormalSpan class='mt-22'>次异常记录</CnNormalSpan>
        </div>

        <CardChild title='异常主要指标分布'>
          <CEcharts
            id='paramAbnormalRatio'
            width='100%'
            height='103px'
            option={{
              tooltip: {
                trigger: 'item'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['65%', '90%'],
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    position: 'outer',
                    alignTo: 'labelLine',
                    fontSize: 10
                  },
                  labelLine: {
                    lineStyle: {
                      color: '#e1e8eb',
                      width: 2
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 14,
                      fontWeight: 'bold'
                    },
                    labelLine: {
                      lineStyle: {
                        width: 4
                      }
                    }
                  },
                  data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 484, name: 'a'},
                    {value: 300, name: 'Video Ads'}
                  ]
                },
                {
                  name: 'Access From2',
                  type: 'pie',
                  radius: ['50%', '65%'],
                  itemStyle: {
                    color: '#dbeef6',
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false
                  },
                  data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 484, name: 'a'},
                    {value: 300, name: 'Video Ads'}
                  ]
                },
                {
                  name: 'Access From3',
                  type: 'pie',
                  radius: ['0', '95%'],
                  label: {
                    show: false
                  },
                  itemStyle: {
                    borderColor: '#dbeef6',
                    borderWidth: 2,
                    borderType: 'dashed'
                  },
                  emptyCircleStyle: {
                    color: 'transparent'
                  },
                  data: []
                }
              ]
            }}
          ></CEcharts>
        </CardChild>
        <CardChild title='异常时段分布'>
          <div class='h-127'></div>
        </CardChild>
      </ScreenCard>
    )
  }
})
